<template>
  <el-card v-loading='loading'>
    <div
      class="add f-column ai-c jc-c cp"
      @click="$router.push('/handleCourse')"
    >
      <i class="el-icon-plus"></i>
      <span class="mt-2">添加课程</span>
    </div>
    <div class="list cp" v-for="i in list" :key="i.id">
      <div class="img pt-re">
        <img :src="i.coverPath" alt=""  @click="getInfo(i.id)" />
        <div class="operation pt-ab jc-fe f-row ai-c">
          <div v-if="i.status != '4'" @click="emit(i)">编辑</div>
          <div v-if="i.status == '2'" @click="putDownFn('put', i.id)">上架</div>
          <div v-if="i.status == '4'" @click="putDownFn('down', i.id)">
            下架
          </div>
          <div
            v-if="i.status == '0' || i.status == '3' || i.status == '5'"
            @click="subFn(i.id)"
          >
            提交审核
          </div>
          <div v-if="i.isTop == '0' && i.status == '4'" @click="topFn(i.id)">
            置顶
          </div>
          <div v-if="i.isTop == '1' && i.status == '4'" @click="notopFn(i.id)">
            取消置顶
          </div>
          <div @click="delFn(i.id)" v-if="i.status != '4'">删除</div>
        </div>
        <!--    <div :class="['pt-ab', 'state', i.state]" >状态</div> -->
        <div v-if="i.status == '1'" class="pt-ab state state3">待审核</div>
        <div v-if="i.status == '3'" class="pt-ab state state1">已驳回</div>
        <div v-if="i.status == '2'" class="pt-ab state state2">已通过</div>
        <div v-if="i.status == '4'" class="pt-ab state state4">已上架</div>
        <div v-if="i.status == '5'" class="pt-ab state state2">已下架</div>
      </div>
      <div class="title bs-bb">
        <div class="btn-deep" v-if="i.isTop == '1'">置顶</div>
        {{ i.seriesName }}
      </div>
    </div>
    <!--   <el-pagination
      small
      :hide-on-single-page="total<=10?true:false"
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :total="total"
    >
    </el-pagination> -->
  </el-card>
</template>
<script>
import {
  curriculum_list,
  curriculum_sub,
  curriculum_del,
  curriculum_top,
  curriculum_notop,
  curriculum_put_down,
} from "@/request/api";
import upFile from "@/components/common/upFile.vue";
export default {
  components: {
    upFile,
  },
  data() {
    return {
      page: 1,
      rows: 10,
      total: null,
      list: [],
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    //课程信息查看
    getInfo(i){
      this.$router.push(`/courseList/${i}`)
    },
    //上架下架
    putDownFn(e, id) {
          this.loading=true
      let status = null;
      if (e == "put") {
        status = "4";
      } else if (e == "down") {
        status = "5";
      }
      console.log(e, id);
      curriculum_put_down({
        status,
        id,
      }).then((res) => {
            this.loading=false
        if (res.code == 200) {
          this.$message({
            message: "操作成功！",
            type: "success",
          });
          this.getlist();
        } else {
          this.$message.error("操作失败");
        }
      }).catch(err=>{
        this.loading=false
      });
    },
    //取消置顶
    notopFn(id) {
    this.loading=true
      curriculum_notop({
        courseSeriesId: id,
      }).then((res) => {
            this.loading=false
        if (res.code == 200) {
          this.$message({
            message: "取消置顶成功！",
            type: "success",
          });
          this.getlist();
        } else {
          this.$message.error("取消置顶失败");
        }
      }).catch(err=>{
        this.loading=false
      });
    },
    //置顶
    topFn(id) {
          this.loading=true
      curriculum_top({
        courseSeriesId: id,
      }).then((res) => {
            this.loading=false
        if (res.code == 200) {
          this.$message({
            message: "置顶成功！",
            type: "success",
          });
          this.getlist();
        } else {
          this.$message.error("置顶失败");
        }
      }).catch(err=>{
        this.loading=false
      });
    },
    //删除
    delFn(id) {
          this.loading=true
      curriculum_del(id).then((res) => {
        if (res.code == 200) {
              this.loading=false
          this.$message({
            message: "删除成功！",
            type: "success",
          });
          this.getlist();
        } else {
          this.$message.error("删除失败");
        }
      }).catch(err=>{
        this.loading=false
      });
    },
    //提交审核
    subFn(id) {
          this.loading=true
      curriculum_sub({
        courseSeriesId: id,
        status:1
      }).then((res) => {
            this.loading=false
        if (res.code == 200) {
          this.$message({
            message: "操作成功！",
            type: "success",
          });
          this.getlist();
        } else {
          this.$message.error("提交审核失败");
        }
      }).catch(err=>{
        this.loading=false
      });
    },
    //获取列表
    getlist() {
      this.loading=true
      curriculum_list({
        page: this.page,
        rows: this.rows,
      }).then((res) => {
        this.loading=false
        this.list = res.result;
      }).catch(err=>{

      });this.loading=false
    },
    //编辑
    emit(e) {
      this.$router.push({
        name: "handleCourse",
        params: e,
      });
    },
  },
};
</script>
<style lang='less' scoped>
.add {
  box-shadow: 0px 0.25rem 0.625rem 0px #efeded;
}
.el-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
/deep/ .el-card__body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 2.1875rem 2.1875rem;
}
/deep/ .el-card__body > div {
  height: 14.25rem !important;
}
.list {
  width: 100%;
  height: 14.25rem;
  box-shadow: 0px 0.25rem 0.625rem 0px #efeded;
  img {
    width: 100%;
    height: auto;
  }
  .img {
    height: 10.625rem;
    background-color: var(--lightColor);
    overflow: hidden;
  }
  .title {
    font-size: 0.875rem;
    color: #52555a;
    line-height: 3.5625rem;
    height: 3.5625rem;
    padding: 0 0.6875rem;
    overflow: hidden;
    width: 100%;
  }
  border-radius: 0.3125rem;
}
.operation {
  padding: 0.625rem 0 0.625rem 0.625rem;
  width: 100%;
  box-sizing: border-box;
  background: #000000;
  opacity: 0.51;
  position: absolute;
  bottom: 0;
  left: 0;

  div {
    font-size: 0.875rem;
    color: #ffffff;
    border-right: 2px solid #fff;
    line-height: 0.875rem;
    padding: 0 0.625rem;
    cursor: pointer;
  }
  div:last-child {
    border-right: none;
  }
}
.state {
  padding: 0.3125rem 0.625rem;
  border-radius: 0 0.3125rem 0 0.3125rem;
  right: 0;
  top: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.375rem;
  text-align: center;
  font-size: 0.875rem;
  div {
    font-weight: 500;
  }
}
//已驳回
.state1 {
  color: #fd5151;
  background: rgba(253, 81, 81, 0.2);
}
//已通过
.state2 {
  color: #4ba0f7;
  background: rgba(60, 175, 234, 0.2);
}
//待审核
.state3 {
  color: #ff900d;
  background: rgba(255, 144, 13, 0.2);
}
//上架
.state4 {
  color: #43be8b;
  background: rgba(56, 161, 75, 0.2);
}
</style>